<template>
  <el-container>
    <el-main>
      <div v-show="isShowWixin" class="weixin-tip">
        <p>
          <img src="../../static/img/weixindownload.png" alt="微信打开" />
        </p>
      </div>
      <div v-show="isShowIos" class="ios-tip">
        <p>
          IOS版本,攻城狮们正在努力研发中。
        </p>
        <p>
          敬请期待！！!
        </p>
      </div>
      <div v-show="isShowWeb" class="web-tip">
        <p>
          谢谢下载使用！！！
        </p>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "appDownload",
    data() {
      let versions = function() {
        var u = navigator.userAgent,
          app = navigator.appVersion;
        return { //移动终端浏览器版本信息  
          trident: u.indexOf('Trident') > -1, //IE内核  
          presto: u.indexOf('Presto') > -1, //opera内核  
          webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核  
          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核  
          mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端  
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端  
          android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器  
          iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器  
          iPad: u.indexOf('iPad') > -1, //是否iPad 
          weixin: u.match(/MicroMessenger/i) == 'MicroMessenger',
          webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
        };
      }();

      return {
        isShowWixin: false,
        isShowIos: false,
        isShowWeb: false,
        browserVersion: versions
      };
    },
    created() {
      let that = this;
      if (this.browserVersion.weixin) {
        this.isShowWixin = true;
      } else if (that.browserVersion.ios || that.browserVersion.iPhone || that.browserVersion.iPad) { //IOS上线后，可以删除掉该部分
        this.isShowIos = true;
      } else {
        this.isShowWeb = true;
        this.$req.getFree({ systemCode: 'eleSafetyEvalApp' }, api.appdownloadurls, function(_r) {
          let data = _r.data;
          if (that.browserVersion.ios || that.browserVersion.iPhone || that.browserVersion.iPad) {
            var iosUrl = data.ios;
            window.location = iosUrl;
          } else if (that.browserVersion.android) {
            that.url = data.android;
            window.location = data.android;
          } else {
            that.url = data.android;
            window.location = data.android;
          }
        });
      }
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .weixin-tip {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    filter: alpha(opacity=80);
    height: 100%;
    width: 100%;
    z-index: 100;
  }

  .weixin-tip img {
    max-width: 100%;
    height: auto;
  }

  .weixin-tip p {
    text-align: center;
    margin-top: 10%;
    padding: 0 5%;
  }

  .ios-tip,
  .web-tip {
    font-size: 38px;
    margin-top: 20%;
  }
</style>